<script setup lang="ts">
import { RouterView, useRouter } from 'vue-router'
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
let router = useRouter()
let arr = [
  {
    path: "/home/myw",
    title: "我的作品"
  },
  {
    path: "/home/coll",
    title: "协作作品"
  },
  {
    path: "/myb",
    title: "我的工作台"
  }
]
let GoRouter = (path: string) => {
  router.push(path)

}
</script>

<template>
  <div class="home">
    <div class="header">

    </div>
    <div class="main">

      <div class="left">
        <div class="leftone">
          <el-menu active-text-color="#fff" background-color="#eee" class="el-menu-vertical-demo" default-active="2"
            text-color="#fff" @open="handleOpen" @close="handleClose">
            <el-sub-menu index="1">
              <template #title>
                <el-icon>
                  <location />
                </el-icon>
              </template>
              <el-menu-item-group class="ul" title="" v-for="(item, index) in arr" :key="index">
                <span class="sps" @click="GoRouter(item.path)">{{ item.title }}</span>
              </el-menu-item-group>
            </el-sub-menu>
          </el-menu>
        </div>
        <div class="lefttwo">
        
        </div>
      </div>
      <div class="middle">
        <RouterView></RouterView>
      </div>
      <div class="right">
        <div class="rightone">
        
        </div>
        <div class="righttwo">
        
        </div>

      </div>
    </div>
    <div class="footer"></div>
  </div>
</template>

<style scoped lang="scss">
// 在app里面解决10px间距问题
/* 设置外部容器的样式，使用Flexbox进行布局 */
* {
  font-weight: 800;
  font-size: 52px;

}

.sps {
  color: #ccc;
  font-size: 19px;
}

.home {
  display: flex;
  flex-direction: column;
  /* 子元素垂直排列 */
  width: 100vw;
  height: 100vh;
  /* 视口高度，确保布局占满全屏 */
  /* 移除默认的内边距 */
  box-sizing: border-box;
  /* 包含内边距和边框在元素的总宽度和总高度内 */
}

/* 头部样式 */
.header {
  height: 50px;
  /* 根据需要设置高度 */
  // background-color: #333; /* 设置背景色 */  
  color: #fff;
  /* 设置文本颜色 */
  display: flex;
  /* 可选：如果需要在头部内部进行水平布局 */
  align-items: center;
  /* 可选：垂直居中 */
  justify-content: center;
  /* 可选：水平居中 */
  // border: 2px solid black;
}

/* 主体样式 */
.main {
  flex: 1;
  /* 占据剩余空间 */
  // background-color: #12cd66; /* 设置背景色 */  

  /* 添加内边距 */
  overflow: hidden;
  /* 垂直滚动，如果内容过多 */
  // border: 2px solid black;
  // position: relative;

  display: flex;

}

/* 底部样式 */
.footer {
  height: 50px;
  /* 根据需要设置高度 */
  // background-color: #333; /* 设置背景色 */  
  color: #fff;
  /* 设置文本颜色 */
  display: flex;
  /* 可选：如果需要在底部内部进行水平布局 */
  align-items: center;
  /* 可选：垂直居中 */
  justify-content: center;
  /* 可选：水平居中 */
}

.left {
  width: 20%;
  height: 100%;
  // position: absolute;
  // left: 0%;
  // top: 0%;
  // border: 2px solid black;

  .leftone {
    height: 50%;
    // border: 2px solid black;
  }

  .lefttwo {
    height: 50%;
  }
}

.middle {
  width: 60%;
  height: 100%;
}

.right {
  width: 25%;
  height: 100%;
  .rightone {
    height: 50%;
    // border: solid 2px black;

  }

  .righttwo {
    height: 50%;
    // border: solid 2px black;
  }
}

.el-menu-vertical-demo {
  width: 100%;
  height: 100%;
}

.ul {
  line-height: 17px;
  padding-left: 10px
}
</style>
